<template>
    <div class="notice-list" v-loading="loading">
        <common-list @resert="resert" ref="commonListRef" class="common">
            <template #operate="{ scope }">
                <el-button v-if="store.btns.find((item) => item.name === '详情')" link type="primary" size="small" @click="details(scope)">详情</el-button>
                <div v-if="store.btns.find((item) => item.name === '详情')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '编辑')" link type="primary" size="small" @click="edit(scope)">编辑</el-button>
                <div v-if="store.btns.find((item) => item.name === '编辑') && store.btns.find((item) => item.name === '删除')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '删除')" link type="primary" size="small" @click="deletes(scope)">删除</el-button>
            </template>
            <template #state="{ scope }">
                <el-switch v-model="scope.scope.row.state" inline-prompt :active-value="1" :inactive-value="0" active-text="开" inactive-text="关" @change="change(scope.scope.row)" />
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="add" v-if="store.btns.find((item) => item.name === '新增数据字典')">新增数据字典</el-button>
                    <w-button @click="allDeletes" v-if="store.btns.find((item) => item.name === '批量删除')">批量删除</w-button>
                </div>
            </template>
            <template #anotherWrapper>
                <div class="left-box" v-loading="loading">
                    <div class="content">
                        <div class="content-box">
                            <text class="content-text">字典类别</text>
                            <el-input maxlength="30" class="search" v-model="search" placeholder="请输入字典类别" :suffix-icon="Search" @input="searchInput" />
                            <div class="scroll" style="height: calc(100% - 83px); overflow: auto">
                                <p class="option" :class="{ check: item.code == checked }" v-for="item in typeOptionCopy" :key="Code" @click="checkOption(item.code)">
                                    {{ item.name }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </common-list>
        <el-dialog destroy-on-close v-model="dialogVisible" :title="dialogText" :close-on-click-modal="false" width="30%">
            <el-form :disabled="dialogText == '字典详情'" :model="form" label-width="82px" :rules="rules" hide-required-asterisk ref="ruleFormRef">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="字典项编号" prop="code">
                            <el-input maxlength="30" v-model="form.code" placeholder="请输入字典项编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="字典项名称" prop="name">
                            <el-input maxlength="30" v-model="form.name" placeholder="请输入字典项名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="值" prop="value">
                            <el-input maxlength="30" type="number" v-model="form.value" placeholder="请输入值" :disabled="dialogText == '编辑字典'" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="操作对象">
                            <el-input maxlength="30" v-model="form.operateObject" placeholder="请输入操作对象" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input maxlength="30" v-model="form.remark" type="textarea" :rows="5" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
                <div class="button">
                    <div class="submit" @click="submit">
                        <text class="submitText">确认</text>
                    </div>
                    <div class="close" @click="close">
                        <text class="closeText">取消</text>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from "vue";
import { tableConfig, rules } from "./config";
import { Search } from "@element-plus/icons-vue";
import { getParentDictionary, getChildDictionaryPage, addDetail, updateDetail, batchDeleteDetail } from "@/service/api/systemSetup.js";
import { mainStore } from "@/store/main.js";
import wButton from "@/components/wButton.vue";

const store = mainStore();
const commonListRef = ref(null);
const checked = ref(0);
const dialogVisible = ref(false);
const typeOption = ref([]);
const formData = reactive({ parentCode: "" });
const loading = ref(true);
const ruleFormRef = ref();
const search = ref();
const form = ref({
    code: "",
    name: "",
    value: "",
    parentCode: "",
    state: true,
    remark: "",
    operateObject: ""
});
const typeOptionCopy = ref([]);
const dialogText = ref();
const first = ref(true);

getParentDictionary({ name: "" }).then((res) => {
    if (res.code === 200) {
        typeOption.value = res.data;
        typeOptionCopy.value = res.data;
        formData.parentCode = typeOption.value[0].code;
        checked.value = typeOption.value[0].code;
        commonListRef.value.tableRef.getTableList();
    }
    loading.value = false;
});
const checkOption = (code) => {
    checked.value = code;
    formData.parentCode = code;
    commonListRef.value.tableRef.getTableList();
};
const change = (data) => {
    if (!first.value) {
        delete data.isShow;
        const loadingInstance = ElLoading.service();
        updateDetail(data)
            .then((res) => {
                if (res.code === 200) {
                    dialogVisible.value = false;
                }
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    } else {
        first.value = false;
    }
};
const searchInput = () => {
    if (search.value == "") {
        typeOptionCopy.value = typeOption.value;
    } else {
        let item = typeOption.value.filter((i) => {
            return i.name.includes(search.value);
        });
        typeOptionCopy.value = item;
    }
};

const add = () => {
    dialogText.value = "新增字典";
    dialogVisible.value = true;
    form.value = {
        code: "",
        name: "",
        value: "",
        parentCode: checked.value,
        state: 1,
        remark: "",
        operateObject: ""
    };
};
const edit = (scope) => {
    dialogText.value = "编辑字典";
    dialogVisible.value = true;
    form.value = {
        id: scope.scope.row.id,
        code: scope.scope.row.code,
        name: scope.scope.row.name,
        state: scope.scope.row.state,
        value: scope.scope.row.value,
        parentCode: scope.scope.row.parentCode,
        remark: scope.scope.row.remark,
        operateObject: scope.scope.row.operateObject
    };
};
const details = (scope) => {
    dialogText.value = "字典详情";
    dialogVisible.value = true;
    form.value = {
        code: scope.scope.row.code,
        name: scope.scope.row.name,
        value: scope.scope.row.value,
        parentCode: scope.scope.row.parentCode,
        remark: scope.scope.row.remark,
        operateObject: scope.scope.row.operateObject
    };
};
const allDeletes = () => {
    const choose = commonListRef.value.tableRef.allSelectTable.flat().map((item) => item.id);
    if (choose.length == 0) {
        ElMessage({
            message: "请选中需要删除的数据再进行批量删除",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchDeleteDetail({
            ids: choose
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }

                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const deletes = (scope) => {
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchDeleteDetail({
            ids: [scope.scope.row.id]
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                    commonListRef.value.tableRef.allSelectTable = [];
                }
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const close = () => {
    dialogVisible.value = false;
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

const submit = () => {
    if (dialogText.value != "字典详情") {
        if (!ruleFormRef.value) return;
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                const loadingInstance = ElLoading.service();
                form.value.value = parseInt(form.value.value);
                if (dialogText.value == "新增字典") {
                    addDetail(form.value)
                        .then((res) => {
                            if (res.code === 200) {
                                ElMessage({
                                    message: "添加成功",
                                    type: "success"
                                });
                                dialogVisible.value = false;
                            }
                            commonListRef.value.tableRef.getTableList();
                            loadingInstance.close();
                        })
                        .catch(() => {
                            loadingInstance.close();
                        });
                } else {
                    updateDetail(form.value)
                        .then((res) => {
                            if (res.code === 200) {
                                ElMessage({
                                    message: "修改成功",
                                    type: "success"
                                });
                                dialogVisible.value = false;
                            }
                            commonListRef.value.tableRef.getTableList();
                            loadingInstance.close();
                        })
                        .catch(() => {
                            loadingInstance.close();
                        });
                }
            }
        });
    } else {
        dialogVisible.value = false;
    }
};
provide("formData", formData);
provide("tableConfig", tableConfig);
provide("apiFn", getChildDictionaryPage);
// provide("includeName", ["projectId"]);
provide("title", "数据字典明细");
</script>

<style lang="less" scoped>
::v-deep(.el-dialog__title) {
    color: #1b3646;
    font-weight: 600;
}
::v-deep(.el-form-item__label) {
    color: #1b3646;
}

.image {
    width: 160px;
    height: 160px;
}
.image-text {
    font-size: 14px;
    font-weight: 400;
    color: #595959;
}
.contnet-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}
::v-deep(.search-condition) {
    display: none;
}
.option:hover {
    background: #f5f7fa;
}
.search {
    padding: 16px 0;
}
.check {
    background: #f5f7fa;
    // height: 20px;
}
.option {
    font-size: 14px;
    font-weight: 400;
    color: #1b3646;
    cursor: pointer;
    // height: 20px;
    display: flex;
    align-items: center;
}
.notice-list {
    height: 100%;

    .common {
        ::v-deep(.wrapper) {
            display: flex;
            padding: 0 20px 0 0;
            flex-direction: row-reverse;
            height: 100%;
            .wrapper-left {
                flex: 1;
                width: 1px;
                padding-left: 20px;
            }
            .left-box {
                width: 300px;
                background-color: #ecf1f3;
                display: flex;
                justify-content: flex-start;
                .content {
                    width: 284px;
                    background-color: #fff;
                    .content-box {
                        padding: 16px;
                        height: 100%;
                        box-sizing: border-box;
                        .content-text {
                            font-size: 16px;
                            font-weight: 600;
                            color: #1b3646;
                        }
                    }
                }
            }
        }
    }
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
    }
}
.scroll::-webkit-scrollbar {
    width: 4px;
}
.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}
.scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.button {
    display: flex;
    justify-content: center;
}
</style>
<style>
.el-message-box__btns {
    justify-content: center;
}
.el-message-box__title {
    font-weight: 600;
    color: #1b3646;
}
.el-message-box__message {
    color: #1b3646;
}
.el-message-box__btns .el-button--primary {
    background-color: #00428e;
}
</style>
